<template>
  <div style="padding-left: 10px">
    <el-row :gutter="16">
      <el-col :span="16">
        <el-row :gutter="16">
          <el-card :body-style="{ padding: '10px' }" style="height: 150px" shadow="never">
            <h4>实时监控</h4>
            <monitor></monitor>
          </el-card>
        </el-row>
        <br />
        <el-row :gutter="16">
          <el-card :body-style="{ padding: '10px' }" style="height: 465px" shadow="never">
            <h4>
              APP Name信息
              <!-- <span style="float: right">
                <span v-if="checkPermission(['admin'])">
                  <el-link icon="el-icon-edit" :underline="false" type="primary" @click="showAddAssetModal = true">添加机器</el-link>
                </span>
              </span> -->
            </h4>
            <app-names :app-names="serviceInfo.appNames"></app-names>
            <!-- <usage></usage> -->
          </el-card>
        </el-row>
      </el-col>
      <el-col :span="8">
        <el-card :body-style="{ padding: '10px' }" style="height: 100%" shadow="never">
          <h4>
            基本信息
            <span style="float: right">
              <span v-if="checkPermission(['admin'])">
                <el-divider direction="vertical"></el-divider>
                <el-link icon="el-icon-edit" :underline="false" type="primary" @click="showServiceActionModal = true">编辑</el-link>
              </span>
            </span>
          </h4>
          <basic :service-info="serviceInfo"></basic>
        </el-card>
      </el-col>
    </el-row>
    <service-action
      v-if="showServiceActionModal"
      :action="action"
      :service-action-modal="showServiceActionModal"
      :service-info="serviceInfo"
      @on-service-change="setServiceActionModal"
    >
    </service-action>
  </div>
</template>

<script>
import Monitor from '@/views/cmdb/detail/serviceDetail/components/Monitor'
import checkPermission from '@/utils/permission'
import Basic from '@/views/cmdb/detail/serviceDetail/components/Basic'
import AppNames from '@/views/cmdb/detail/serviceDetail/components/AppNames'
import ServiceAction from '@/views/cmdb/service/components/ServiceAction'
import { getCmdbService } from '@/api/cmdb/service'
import { snakeCaseObject } from '@/libs/object'
export default {
  name: 'ServiceDetail',
  components: { Monitor, Basic, ServiceAction, AppNames },
  props: {
    serviceInfo: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      showServiceActionModal: false,
      action: {
        title: '修改',
        type: 'update',
        source: 'basic'
      }
    }
  },
  mounted() {},
  methods: {
    checkPermission,
    async getCmdbService() {
      const { data } = await getCmdbService(snakeCaseObject(this.serviceId))
      this.serviceInfo = data
    },
    setServiceActionModal(val) {
      this.showServiceActionModal = val['status']
      // if (!val['status'] && val['type'] === 'update') {
      //   this.getCmdbService()
      // }
    }
  }
}
</script>

<style lang='scs' scoped>
</style>
